<template>
  <ul class="icon-main">
    <li
      v-for="(item, index) in iconList"
      :key="index"
      :class="[activeIndex == index ? 'active' : '']"
      @click="activeClick(index, item)"
    >
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="item"></use>
      </svg>
      <div class="triangle">
        <span>1</span>
      </div>
    </li>
  </ul>
</template>
<script>
import "./iconfont/iconfont.js";
export default {
  data() {
    return {
      activeIndex: -1,
      iconList: [
        "#icon-gouwuche-moren",
        "#icon-gouwuche-xuanzhong",
        "#icon-a-ziyuan141",
        "#icon-a-ziyuan121",
        "#icon-a-ziyuan10",
        "#icon-a-ziyuan131",
        "#icon-a-ziyuan111",
        "#icon-tubiao-02",
        "#icon-tubiaojin-04",
        "#icon-tubiao-01",
        "#icon-tubiaojin-03",
        "#icon-shouye1",
        "#icon-shouye-xuanzhong",
        "#icon-huodong1",
        "#icon-huodong-xuanzhong",
        "#icon-choujiang1",
        "#icon-choujiang-xuanzhong",
        "#icon-kefu1",
        "#icon-kefu-xuanzhong",
        "#icon-wode",
        "#icon-wode-xuanzhong",
        "#icon-kefu-copy",
        "#icon-a-ziyuan19-copy",
        "#icon-gouwuche-copy",
        "#icon-a-ziyuan2",
        "#icon-a-ziyuan4",
        "#icon-a-ziyuan5",
        "#icon-a-ziyuan7",
        "#icon-a-ziyuan8",
        "#icon-a-ziyuan6",
        "#icon-a-ziyuan3",
        "#icon-a-ziyuan1",
        "#icon-kefu",
        "#icon-fenxiang",
        "#icon-shangchangtongzhi",
        "#icon-a-ziyuan20",
        "#icon-a-ziyuan18",
        "#icon-a-ziyuan15",
        "#icon-a-ziyuan12",
        "#icon-a-ziyuan16",
        "#icon-a-ziyuan14",
        "#icon-a-ziyuan19",
        "#icon-gouwuche",
      ],
    };
  },
  methods: {
    activeClick(i, item) {
      this.activeIndex = i;
      this.$emit("iconBox", item);
    },
  },
};
</script>
<style lang="scss">
.icon {
  height: 25px;
  width: 25px;
}
.icon-main {
  display: flex;
  flex-wrap: wrap;
  li {
    border: 2px solid transparent;
    .icon {
      margin: 15px;
    }
    .triangle {
      display: none;
    }
  }
  .active {
    position: relative;
    border: 2px solid #0077dd;
    .triangle {
      position: absolute;
      display: block;
      right: -1px;
      top: 0px;
      border-width: 12px;
      border-style: solid;
      border-color: #0077dd #0077dd transparent transparent;
      border-image: initial;
      z-index: 1;
      span {
        position: absolute;
        top: -14px;
        right: -10px;
        z-index: 2;
        color: #fff;
      }
    }
  }
}
</style>
